<template>
  <div class="orderCheck publicBox">
    <div class="top"></div>
    <div class="publicBoxContent">
      <div class="main">
        <div class="mainTitle">订单校验</div>
        <div class="mainContent">
          <p>请确认当前校验结果，并完成支付</p>
            <table v-for="(item,index) in listData.goods" :key="index">
              <tr class="tableOne">
                <td></td>
                <td class="pub">商品</td>
                <td class="pub">规格</td>
                <td class="pub">价格</td>
                <td class="pub">校验结果</td>
              </tr>
              <tr class="tableTwo">
                <td class="img">
                  <div class="bjImg" >
                    <img :src="$getImg(item.image)" alt="">
                  </div>
                </td>
                <td class="pub">{{item.goods_name}}</td>
                <td class="pub">{{item.goods_attr}}</td>
                <td class="pub">{{item.total_pay_price}}</td>
                <td class="pub" v-if="item.create_fail==null" style="color: #67C23A">下单成功</td>
                <td class="pub" v-else style="color: red">库存不足，下单失败</td>
              </tr>
            </table>
          <p>合计金额：<span class="money">￥{{playMoney}}</span></p>
          <div class="line"></div>
<!--          <p>余额支付 <span style="margin-left: 20px">当前账户余额(元)：<span class="userMoney">￥{{ shopInformation && shopInformation.balance}}</span></span></p>-->
<!--          <p class="ts" v-if="playMoney>shopInformation.balance">!余额不足，请充值</p>-->
        </div>
        <div style="text-align: center">
          <el-button type="primary" disabled v-if="bz==goodsLength">立即支付</el-button>
          <el-button type="primary" @click="nowPlay(20)" v-else>立即支付</el-button>
        </div>
      </div>

    </div>


    <el-dialog
        title=""
        :close-on-click-modal=false
        :close-on-press-escape=false
        :show-close=false
        :visible.sync="centerDialogVisible"
        width="30%"
        top="35vh"
        center>
      <div class="pay" v-show="isShow=='3'">
        <div @click="payT=0">
          <img src="../../assets/img/wxzf.png"/>
          <span :class="[payT== 0 ? 'wxzf' : '']">微信支付</span>
        </div>
        <div class="feng" v-if="currtType"></div>
        <div @click="payT=1" v-if="currtType">
          <img src="../../assets/img/yezf.png"/>
          <span :class="[payT== 1 ? 'yezf' : '']">余额支付</span>
        </div>

        <!--        <div @click="payT=0">微信支付</div>-->
        <!--        <div @click="payT=1" v-if="currtType">余额支付</div>-->
      </div>
      <div style="height: 250px">
        <div v-show="isShow=='1'">
          <div class="loadingBox" v-loading="loading"
               element-loading-text="正在支付，请等待......" element-loading-spinner="el-icon-loading">
          </div>
          <p class="tswz">预计等待5-10s</p>
        </div>

        <div class="nowPlay" v-show="isShow=='3'">
          <div class="clonse" @click="clea"></div>
          <template v-if="payT==1 ">
            <strong style="margin-bottom: 20px">订单金额：<span class="ddje">￥{{playMoney}}</span></strong>

            <div>
              当前账户余额(元)：￥{{ shopInformation && shopInformation.balance}}
            </div>
            <div v-if=" parseFloat(playMoney) > parseFloat(shopInformation.balance)">
              余额不足，请充值
            </div>
            <div class="line"></div>
            <el-button type="primary" @click="nowPlay(10)">立即支付</el-button>
          </template>
          <template v-else>
            <div class="qrCode">
              <img :src="payUrl"/>
            </div>
            <div class="plasePay">请扫码支付：<span>￥</span><span>{{playMoney}}</span></div>
            <!--            <el-button type="success" v-if="isplay" @click="clea">确认支付</el-button>-->
            <!--            <el-button type="success" v-else disabled >确认支付</el-button>-->
          </template>

        </div>


      </div>

    </el-dialog>
  </div>
</template>

<script>
    var payInterval=null;
    var djsinter=null;
    export default {
        name: "orderCheck",
        data(){
            return{
                centerDialogVisible: false,
                isShow: 3,
                djs:3,
                payT: 0,
                loading: true,
                payUrl:'',
                isplay:false,
                currtType:true,
                content:'',
                orderId:0,
                listData:{},
                shopInformation:{},
                playMoney:0,
                childID:[],
                bz:0,
                goodsLength:0
            }
        },
        created () {
            this.orderId = this.$route.query.order_id;
            this.getUserInfo();
            this.getList();

        },
        destroyed(){

            clearInterval(payInterval);
            clearInterval(djsinter);
        },
        methods : {
            clea(){
                this.centerDialogVisible=false;
                clearInterval(payInterval);
                clearInterval(djsinter);

            },
            getUserInfo(){
                this.$HttpGet("/index.php?s=/admin/index/details").then(res => {
                    this.shopInformation = res.data
                })
            },
            getList(){
                this.$HttpGet("/index.php?s=/admin/home.order/detail",{
                    order_id:this.orderId
                }).then(res => {
                    this.listData=res.data.order;
                    this.goodsLength=this.listData.goods.length;
                    for(let i=0;i<this.listData.goods.length;i++){
                        console.log(this.listData.goods[i].trade_type_name)
                        if(this.listData.goods[i].trade_type_name =='保税'){
                            this.currtType=false;
                        }
                    }

                    for(let i=0;i<this.listData.goods.length;i++){
                        if(this.listData.goods[i].create_fail==null){
                              this.playMoney+=parseFloat(this.listData.goods[i].total_pay_price);
                              this.childID.push(this.listData.goods[i].order_child_id)
                        }else {
                            this.bz++;
                        }
                    }
                })
            },
            nowPlay(payType=10) {
                this.centerDialogVisible=true;
                if(payType==10){
                    this.isShow = 1;
                }
                console.log(this.childID);
                this.$HttpPost("/index.php?s=/admin/home.order/pay", {
                    order_id: this.orderId,
                    payType: payType,
                    cheild_id: this.childID
                }).then(res => {
                    var that=this;
                    if (res.code == 0 && payType==10) {
                        this.centerDialogVisible = false;
                        this.$notifySuccess(res.msg.success);
                        this.getList();
                        // this.$router.push({path: `/index/order/allOrder`});
                    }
                    if(res.code == 0 && payType==20){
                        this.payUrl=res.data.payment;
                        payInterval=setInterval(()=>{
                            this.$HttpGet(`/index.php?s=/admin/home.order/pay_wechat_status&order_id=${that.orderId}`,{

                            }).then(res => {
                                if(res.data!='未完成支付'){
                                    this.isplay=true;
                                    // this.$notifySuccess('支付成功');
                                    this.payT='支付成功';
                                    this.isShow='3';

                                    djsinter = setInterval(() => {
                                        if(this.djs<1){
                                            clearInterval(djsinter);
                                            return false;
                                        }
                                        if (this.djs == 1) {
                                            this.isplay = true;
                                            // this.$notifySuccess('支付成功');
                                            this.$router.push({path: `/index/order/allOrder`});

                                        }
                                        this.djs -= 1;

                                    }, 1000)

                                    // djsinter=setInterval(()=>{
                                    //     if(this.djs<=1){
                                    //         this.isplay=true;
                                    //         this.$router.push({path: `/index/order/allOrder`});
                                    //
                                    //         clearInterval(djsinter);
                                    //         clearInterval(payInterval);
                                    //     }
                                    //     this.djs -= 1;
                                    //
                                    // },1000)
                                }
                            })
                        },1000)
                    }


                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .orderCheck{
      width: 100%;
      min-width: 1020px;
      .top{
        height: 90px;
        background-color: #ffffff;
      }
      .publicBoxContent{
        background-color: #f7f9fa;
        padding-top: 0px;
        box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.00);
        .main{
          .mainTitle{
            height: 50px;
            line-height: 50px;
            border-bottom: 1px dashed #385cc8;
            margin-bottom: 20px;
          }
          .mainContent{
            .userMoney{
              color: black;
              font-size: 16px;
              font-weight: bolder;
            }
            .money{
              color: red;
              font-size: 18px;
            }
            .ts{
              margin-left: 80px;
              margin-top: 10px;
              color: red;
            }
            .line{
              height: 5px;
              border-bottom: 1px dashed #385cc8;
              margin-top: 20px;
              margin-bottom: 20px;
            }
            .pub{
              width: 25%;
            }
              table{
                border-collapse: collapse;
                margin-top: 20px;
                margin-bottom: 20px;
                width: 100%;

                .tableOne{
                  background: rgba(58, 97, 202, 0.1);
                  height: 38px;
                  line-height: 38px;
                }
                .tableTwo{
                  border: 1px solid #e5e5e5;
                  height: 90px;
                  td{
                    border: 1px solid #e5e5e5;

                  }
                  .img{
                    width: 150px;
                    height: 90px;

                    .bjImg{
                      width: 70px;
                      height: 70px;
                      background-color: red;
                      margin-left: 35px;
                      margin-right: 35px;
                      img{
                        width: 100%;
                        height: 100%;
                      }
                    }
                  }
                }
              }
          }
        }
      }
    }

    .nowPlay {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .ddje{

        font-size: 24px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #E93030;
      }
      .plasePay{
        span{
          font-size: 20px;
          color: red;
          &:first-child{
            font-size: 16px;
            color: red;
          }
        }
      }
      .zfcg{
        color: #E93030;
        font-size: 26px;
        font-weight: bold;
      }
      .qsd{
        font-size: 14px;
        color: #333333;

      }
      .qrCode {
        width: 150px;
        height: 150px;
        cursor: pointer;
        img {
          width: 100%;
          height: 100%;
        }

      }

      .clonse {
        width: 16px;
        height: 16px;

        position: absolute;
        top: -76px;
        right: -10px;
        cursor: pointer;
        background: url("../../assets/img/del.png") no-repeat;
      }
      .line {
        width: 80%;
        height: 1px;
        border-top: dashed #ACC0D8 1px;

      }

      div {
        margin-bottom: 20px;
      }
    }
    .tswz {
      position: absolute;
      top: 170px;
      text-align: center;
      width: 100%;
      margin-left: -25px;
      color: #409EFF;
    }
    /deep/ .el-dialog {
      min-width: 550px;
      border-radius: 20px;

      .pay {
        position: relative;
        width: 220px;
        height: 50px;
        display: flex;
        justify-content: space-between;
        cursor: pointer;
        top: -27px;

        div {
          &:first-child:hover {
            color: #2CCE30;
          }

          &:last-child:hover {
            color: #3958ac;
          }

          img {
            width: 25px;
            height: 22px;
            margin-top: -5px;
          }

          span {
            margin-left: 5px;

          }

          .wxzf {
            color: #09BB07;
          }

          .yezf {
            color: #3958AC;
          }
        }

        .feng {

          height: 20px;
          background: #333333;
          border-right: solid #333333 2px;

        }
      }
    }
</style>